<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
<body>
<div id="app">
    <div class="my-order-body" v-if="orders.length>0" style="padding-top:0;margin-bottom:10px;" v-cloak>
        <div class="my-order-item" v-for="(item,index) in orders"
             v-myclick="[item, hrefOrder]">
            <div class="item-goods" v-if="!item.goods || item.goods.length == 0">
                <div class="order-body">
                    <div class="order-top">
                        <span style="float: left " class="seller" :style="{background:item.from_type_color}">{{item.from_type_name}}</span>
                        <span style="float: right ">{{item.date_add | date}}</span>
                    </div>
                </div>
            </div>
            <div class="item-goods" v-else>
                <div class="order-body">
                    <div class="order-left">
                        <span class="seller" :style="{background:item.from_type_color}">{{item.from_type_name}}</span>
                        <img v-image-resize="{src:item.goods[0].pic }" :key="item.goods[0].goods_id">
                    </div>
                    <div class="order-middle">
                        <p>{{item.goods[0].title}}</p>
                        <p class="order-date">{{item.date_add | date}}</p>
                    </div>
                    <div class="order-bottom">
                        <p class="p-first">￥{{item.goods[0].total_real_pay_fee}}</p>
                        <p class="p-second">×{{item.goods[0].quantity}}</p>
                        <p class="p-third">￥{{item.total_real_pay_fee}}</p>
                    </div>
                </div>
            </div>
            <div class="order-bottom">
                <span>订单号：{{item.order_sn}}</span>
                <span style="float:right;color:#E7A66D">{{item.state_str}}</span>
            </div>
        </div>
    </div>
    <div v-cloak class="my-order-body" v-if="orders.length==0">
        <div style="text-align:center;padding-top: 70px;">
            <img src="../../image/big/not_available.png" width="70px" height="70px"/>
            <div style="padding-top:10px ">
                <span>没找到您要的商品</span>
            </div>
        </div>
    </div>
    <div class="userinfo-modal" v-cloak :class="addModal" v-myclick.stop="changeShowAdd" @touchmove.prevent>
        <div class="userinfo-modal-alert" :class="addModal" style="top:40%;">
            <img class="alert-close" v-src="'../../image/btn_close_black.png'" v-myclick.stop="[false, changeShowAdd]">
            <div class="alert-title">请输入订单号</div>
            <div class="alert-msg">
                <input type="text" v-model="order_sn" style="height:100%;width:100%;" v-input-click/>
            </div>
            <a class="alert-btn" v-myclick="addOrder">确定</a>
        </div>
    </div>
    <lazy-load v-if="orders.length>0"
               count-per-page="10"
               :arr="orders"
               :url="url"
               :other-datas="{state:state}">
    </lazy-load>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/components.js"></script>
<script>
    var vm;
    var orders;
    var state;
    apiready = function () {
        setBSImg();

        showProgress();
        state = api.pageParam.state;
        var data = {
            member_id: getPrefs('member_id'),
            state: state
        };
        var callback = function (ret) {
            orders = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.getMyOrders, data, callback);
        addListeners();
        setRefreshHeaderInfo(refresh);
    };


    function initApp() {
        vm = new Vue({
            el: "#app",
            data: {
                showAdd: false,
                order_sn: '',
                orders: orders,
                state: state,
                url: URL.getMyOrders,
            },
            computed: {
                addModal: function () {
                    return {
                        show: this.showAdd,
                        hide: !this.showAdd
                    }
                },
            },
            methods: {
                addOrder: function () {
                    var that = this;
                    var data = {
                        member_id: getPrefs('member_id'),
                        order_sn: this.order_sn
                    };
                    pinet.post(URL.addOrder, data, function (data) {
                        vm.changeShowAdd();
                        refresh();
                        pinet.alert(data.message);
                    });
                },
                hrefOrder: function (item) {
                    if (!item.goods || item.goods.length == 0) {
                        pinet.alert("此订单暂时不能查看");
                        return;
                    }
                    openWin('order_detail', {order_id: item.order_id});
                },
                changeShowAdd: function () {
                    api.sendEvent({
                        name: 'hideShowAdd',
                    });
                }
            },
        });
    }

    function refresh() {
        var data = {
            member_id: getPrefs('member_id'),
            state: vm.state
        };
        var callback = function (ret) {
            orders = ret.content;
            if (vm) {
                vm.orders = orders;
            } else {
                initApp();
            }
            api.refreshHeaderLoadDone();
        };
        var errback = function () {
            api.refreshHeaderLoadDone();
        };
        pinet.post(URL.getMyOrders, data, callback, errback);
    }

    function addListeners() {
        api.addEventListener({
            name: 'hideShowAdd'
        }, function () {
            vm.showAdd = false;
        });

        api.addEventListener({
            name: 'showAdd'
        }, function () {
            vm.showAdd = true;
        });

        api.addEventListener({
            name: 'loadOrders'
        }, function (ret) {
            vm.orders = ret.value.orders;
            vm.state = ret.value.state;
        });
    }
</script>
</body>
</html>
